<template>
	<view class="content">
		<view class="banner">
			<!-- <image v-if="detail.images" :src="detail.images[0]" mode=""></image> -->
			<swiper v-if="detail.images.length > 0" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item in detail.images">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="box">
				<view class="name">
					{{detail.name}}
				</view>
				<view class="address">
					{{detail.address}}
				</view>
			</view>
			<view class="distance" @click="openMap">
				<image src="../../static/shopDetail_01.png" mode=""></image>
				<text>{{detail.juli}}km</text>
			</view>
		</view>
		<view class="phone">
			联系我们
			<image src="../../static/shopDetail_02.png" mode="" @click="callPhone"></image>
		</view>
		<view class="list">
			<view class="item">
				预约时间
				<image src="../../static/right.png" mode="" class="right"></image>
				<text @click="onShowDatePicker('datetime')">{{appointmenttime || '请选择时间'}} </text>
				<!-- <uni-datetime-picker v-model="single" :border="false" /> -->
			</view>
			<view class="item">
				优惠券
				<!-- <image src="../../static/right.png" mode="" class="right"></image> -->
				<text>{{couponDetail.name}}</text>
			</view>
			<view class="item">
				<view class="btn" @click="submit">我要预约</view>
			</view>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" format="yyyy-mm-dd hh:ii"
			@confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import loginCom from "@/components/loginCom.vue";
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		data() {
			return {
				detail: {},
				id: "",
				hasLogin: false,
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				type: 'datetime',
				appointmenttime: "",
				couponList: [],
				couponDetail: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad(options) {
			this.getDetail();
			this.getCouponList()
			this.shopId = options.shopId
			this.couponId = options.couponId;
			this.hasLogin = !!uni.getStorageSync('token');
		},
		components: {
			MxDatePicker,
		},
		methods: {
			onShowDatePicker(type) { //显示
				console.log('进来了');
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) { //选择
				this.showPicker = false;
				console.log(e)
				if (e) {
					this.appointmenttime = e.value;
				}
			},
			openMap() {
				uni.openLocation({
					latitude: Number(this.detail.lat), //要去的纬度-地址       
					longitude: Number(this.detail.lng), //要去的经度-地址
					name: this.detail.name, //地址名称
					address: this.detail.address, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.tel //仅为示例
				});
			},
			getDetail() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log(res)
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.$get('shop/shopinfo', {
							id: this.shopId,
							lat: this.latitude,
							lng: this.longitude,
						}, (res) => {
							console.log(res)
							this.detail = res[0]
						})
					}
				});
			},
			submit() {
				if (!this.appointmenttime) {
					uni.showToast({
						title: '请选择预约时间！',
						icon: "none"
					})
					return
				}
				this.$post('appointment/add', {
					usercoupon_id: this.couponId,
					shop_id: this.shopId,
					appointmenttime: this.appointmenttime
				}, (res) => {
					uni.switchTab({
						url: '/pages/appointment/appointment'
					});
				})
			},
			getCouponList() {
				this.$get('coupon/couponlist', {
					page: 1,
					pagesize: 1000,
				}, (res) => {
					this.couponList = res
					this.getCouponDetail()
				})
			},
			getCouponDetail() {
				this.couponDetail = this.couponList.filter(item => item.id == this.couponId)[0]
			},
		}
	}
</script>

<style>
	.banner {
		background-color: #FFFFFF;
	}

	.banner image {
		width: 100%;
		border-bottom: 1px solid #E2E4EA;
		display: block;
	}
	
	.banner swiper{
		height: 450rpx;
	}

	.info {
		padding: 26rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		border-bottom: 1px solid #E2E4EA;
	}

	.info .box {
		width: 550rpx;
		border-right: 1px solid #E2E4EA;
		float: left;
	}

	.info .name {
		font-size: 34rpx;
		color: #111111;
		margin-bottom: 20rpx;
	}

	.info .address {
		color: #666666;
		font-size: 26rpx;
	}

	.info .distance {
		float: right;
		width: 140rpx;
		text-align: center;
	}

	.info .distance image {
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 0 auto;
	}

	.info .distance text {
		font-size: 26rpx;
		color: #666666;
	}

	.phone {
		font-size: 32rpx;
		line-height: 100rpx;
		height: 100rpx;
		padding: 0 26rpx;
		background-color: #FFFFFF;
	}

	.phone image {
		width: 48rpx;
		height: 48rpx;
		float: right;
		margin-top: 26rpx;
	}

	.list {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 0 24rpx;
	}

	.list .item {
		border-bottom: 1px solid #E2E4EA;
		padding: 28rpx 0;
		position: relative;
	}

	.list .item .right {
		float: right;
		width: 14rpx;
		height: 26rpx;
		margin-top: 8rpx;
	}

	.list .item text {
		float: right;
		margin-right: 15rpx;
	}

	.list .item .btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #FE0520;
		border-radius: 40rpx;
	}
</style>
